'use client'
import { Card, List } from 'antd';
import { useState, useEffect, useCallback, useRef } from 'react';

interface PopupResultProps {
    ex?: string;
}

interface DayRuleResult {
    newDateArr: number[][];
    newDayRule: string;
    newDayRuleSup: string | number | number[];
}

interface WeekRuleResult {
    newDateArr: number[][];
    newDayRule: string;
    newDayRuleSup: string | number | number[];
}

const PopupResult = ({ ex = '' }: PopupResultProps) => {
    const [dayRule, setDayRule] = useState<string>('');
    const [dayRuleSup, setDayRuleSup] = useState<string | number | number[]>('');
    const [dateArr, setDateArr] = useState<number[][]>([[], [], [], [], [], [], []]);
    const [resultList, setResultList] = useState<string[]>([]);
    const [isShow, setIsShow] = useState<boolean>(false);
    const prevExRef = useRef<string>('');

    // 用于计算某位数字在数组中的索引
    const getIndex = useCallback((arr: number[], value: number): number => {
        if (value <= arr[0] || value > arr[arr.length - 1]) {
            return 0;
        } else {
            for (let i = 0; i < arr.length - 1; i++) {
                if (value > arr[i] && value <= arr[i + 1]) {
                    return i + 1;
                }
            }
        }
        return 0;
    }, []);

    // 根据传进来的min-max返回一个顺序的数组
    const getOrderArr = useCallback((min: number, max: number): number[] => {
        let arr: number[] = [];
        for (let i = min; i <= max; i++) {
            arr.push(i);
        }
        return arr;
    }, []);

    // 根据规则中指定的零散值返回一个数组
    const getAssignArr = useCallback((rule: string): number[] => {
        let arr: number[] = [];
        let assiginArr = rule.split(',');
        for (let i = 0; i < assiginArr.length; i++) {
            arr[i] = Number(assiginArr[i]);
        }
        arr.sort(compare);
        return arr;
    }, []);

    // 比较数字大小（用于Array.sort）
    const compare = useCallback((value1: number, value2: number): number => {
        return value1 - value2;
    }, []);

    // 根据一定算术规则计算返回一个数组
    const getAverageArr = useCallback((rule: string, limit: number): number[] => {
        let arr: number[] = [];
        let agArr = rule.split('/');
        let min = Number(agArr[0]);
        let step = Number(agArr[1]);
        while (min <= limit) {
            arr.push(min);
            min += step;
        }
        return arr;
    }, []);

    // 根据规则返回一个具有周期性的数组
    const getCycleArr = useCallback((rule: string, limit: number, status: boolean): number[] => {
        let arr: number[] = [];
        let cycleArr = rule.split('-');
        let min = Number(cycleArr[0]);
        let max = Number(cycleArr[1]);
        if (min > max) {
            max += limit;
        }
        for (let i = min; i <= max; i++) {
            let add = 0;
            if (status === false && i % limit === 0) {
                add = limit;
            }
            arr.push(Math.round((i % limit) + add));
        }
        arr.sort(compare);
        return arr;
    }, [compare]);

    // 格式化日期格式如：2017-9-19 18:04:33
    const formatDate = useCallback((value: number | string, type?: string): string | number => {
        let time = typeof value === 'number' ? new Date(value) : new Date(value);
        let Y = time.getFullYear();
        let M = time.getMonth() + 1;
        let D = time.getDate();
        let h = time.getHours();
        let m = time.getMinutes();
        let s = time.getSeconds();
        let week = time.getDay();

        if (type === undefined) {
            return (
                Y +
                '-' +
                (M < 10 ? '0' + M : M) +
                '-' +
                (D < 10 ? '0' + D : D) +
                ' ' +
                (h < 10 ? '0' + h : h) +
                ':' +
                (m < 10 ? '0' + m : m) +
                ':' +
                (s < 10 ? '0' + s : s)
            );
        } else if (type === 'week') {
            return week;
        }
        return '';
    }, []);

    // 检查日期是否存在
    const checkDate = useCallback((value: string): boolean => {
        let time = new Date(value);
        let format = formatDate(Number(time));
        return value === format;
    }, [formatDate]);

    // 获取"秒"数组
    const getSecondArr = useCallback(
        (rule: string): number[][] => {
            let newDateArr = [...dateArr];
            newDateArr[0] = getOrderArr(0, 59);
            if (rule.indexOf('-') >= 0) {
                newDateArr[0] = getCycleArr(rule, 60, true);
            } else if (rule.indexOf('/') >= 0) {
                newDateArr[0] = getAverageArr(rule, 59);
            } else if (rule !== '*') {
                newDateArr[0] = getAssignArr(rule);
            }
            return newDateArr;
        },
        [dateArr, getOrderArr, getCycleArr, getAverageArr, getAssignArr]
    );

    // 获取"分"数组
    const getMinArr = useCallback(
        (rule: string, currentDateArr: number[][]): number[][] => {
            let newDateArr = [...currentDateArr];
            newDateArr[1] = getOrderArr(0, 59);
            if (rule.indexOf('-') >= 0) {
                newDateArr[1] = getCycleArr(rule, 60, true);
            } else if (rule.indexOf('/') >= 0) {
                newDateArr[1] = getAverageArr(rule, 59);
            } else if (rule !== '*') {
                newDateArr[1] = getAssignArr(rule);
            }
            return newDateArr;
        },
        [getOrderArr, getCycleArr, getAverageArr, getAssignArr]
    );

    // 获取"时"数组
    const getHourArr = useCallback(
        (rule: string, currentDateArr: number[][]): number[][] => {
            let newDateArr = [...currentDateArr];
            newDateArr[2] = getOrderArr(0, 23);
            if (rule.indexOf('-') >= 0) {
                newDateArr[2] = getCycleArr(rule, 24, true);
            } else if (rule.indexOf('/') >= 0) {
                newDateArr[2] = getAverageArr(rule, 23);
            } else if (rule !== '*') {
                newDateArr[2] = getAssignArr(rule);
            }
            return newDateArr;
        },
        [getOrderArr, getCycleArr, getAverageArr, getAssignArr]
    );

    // 获取"日"数组-少量为日期规则
    const getDayArr = useCallback(
        (rule: string, currentDateArr: number[][]): DayRuleResult => {
            let newDateArr = [...currentDateArr];
            newDateArr[3] = getOrderArr(1, 31);
            let newDayRule = '';
            let newDayRuleSup: string | number | number[] = '';

            if (rule.indexOf('-') >= 0) {
                newDateArr[3] = getCycleArr(rule, 31, false);
                newDayRuleSup = 'null';
            } else if (rule.indexOf('/') >= 0) {
                newDateArr[3] = getAverageArr(rule, 31);
                newDayRuleSup = 'null';
            } else if (rule.indexOf('W') >= 0) {
                newDayRule = 'workDay';
                const match = rule.match(/[0-9]{1,2}/g);
                newDayRuleSup = match ? Number(match[0]) : 0;
                newDateArr[3] = [newDayRuleSup as number];
            } else if (rule.indexOf('L') >= 0) {
                newDayRule = 'lastDay';
                newDayRuleSup = 'null';
                newDateArr[3] = [31];
            } else if (rule !== '*' && rule !== '?') {
                newDateArr[3] = getAssignArr(rule);
                newDayRuleSup = 'null';
            } else if (rule === '*') {
                newDayRuleSup = 'null';
            }

            return { newDateArr, newDayRule, newDayRuleSup };
        },
        [getOrderArr, getCycleArr, getAverageArr, getAssignArr]
    );

    // 获取"月"数组
    const getMonthArr = useCallback(
        (rule: string, currentDateArr: number[][]): number[][] => {
            let newDateArr = [...currentDateArr];
            newDateArr[4] = getOrderArr(1, 12);
            if (rule.indexOf('-') >= 0) {
                newDateArr[4] = getCycleArr(rule, 12, false);
            } else if (rule.indexOf('/') >= 0) {
                newDateArr[4] = getAverageArr(rule, 12);
            } else if (rule !== '*') {
                newDateArr[4] = getAssignArr(rule);
            }
            return newDateArr;
        },
        [getOrderArr, getCycleArr, getAverageArr, getAssignArr]
    );

    // 获取"周"数组
    const getWeekArr = useCallback(
        (rule: string, currentDateArr: number[][], currentDayRule: string, currentDayRuleSup: string | number | number[]): WeekRuleResult => {
            let newDayRule = currentDayRule;
            let newDayRuleSup = currentDayRuleSup;
            let newDateArr = [...currentDateArr];

            if (currentDayRule === '' && currentDayRuleSup === '') {
                if (rule.indexOf('-') >= 0) {
                    newDayRule = 'weekDay';
                    newDayRuleSup = getCycleArr(rule, 7, false);
                } else if (rule.indexOf('#') >= 0) {
                    newDayRule = 'assWeek';
                    let matchRule = rule.match(/[0-9]{1}/g);
                    if (matchRule && matchRule.length >= 2) {
                        newDayRuleSup = [Number(matchRule[1]), Number(matchRule[0])];
                        newDateArr[3] = [1];
                        if ((newDayRuleSup as number[])[1] === 7) {
                            newDayRuleSup = [(newDayRuleSup as number[])[0], 0];
                        }
                    }
                } else if (rule.indexOf('L') >= 0) {
                    newDayRule = 'lastWeek';
                    const match = rule.match(/[0-9]{1,2}/g);
                    newDayRuleSup = match ? Number(match[0]) : 0;
                    newDateArr[3] = [31];
                    if (newDayRuleSup === 7) {
                        newDayRuleSup = 0;
                    }
                } else if (rule !== '*' && rule !== '?') {
                    newDayRule = 'weekDay';
                    newDayRuleSup = getAssignArr(rule);
                }
            }

            return { newDateArr, newDayRule, newDayRuleSup };
        },
        [getCycleArr, getAssignArr]
    );

    // 获取"年"数组
    const getYearArr = useCallback(
        (rule: string, year: number, currentDateArr: number[][]): number[][] => {
            let newDateArr = [...currentDateArr];
            newDateArr[5] = getOrderArr(year, year + 100);
            if (rule !== undefined) {
                if (rule.indexOf('-') >= 0) {
                    newDateArr[5] = getCycleArr(rule, year + 100, false);
                } else if (rule.indexOf('/') >= 0) {
                    newDateArr[5] = getAverageArr(rule, year + 100);
                } else if (rule !== '*') {
                    newDateArr[5] = getAssignArr(rule);
                }
            }
            return newDateArr;
        },
        [getOrderArr, getCycleArr, getAverageArr, getAssignArr]
    );

    // 表达式值变化时，开始去计算结果
    const expressionChange = useCallback(() => {
        if (!ex) return;

        // 计算开始-隐藏结果
        setIsShow(false);

        // 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
        let ruleArr = ex.split(" ");

        // 用于记录进入循环的次数
        let nums = 0;

        // 用于暂时存符号时间规则结果的数组
        let resultArr: string[] = [];

        // 获取当前时间精确至[年、月、日、时、分、秒]
        let nTime = new Date();
        let nYear = nTime.getFullYear();
        let nMonth = nTime.getMonth() + 1;
        let nDay = nTime.getDate();
        let nHour = nTime.getHours();
        let nMin = nTime.getMinutes();
        let nSecond = nTime.getSeconds();

        // 根据规则获取到近100年可能年数组、月数组等等
        let updatedDateArr = getSecondArr(ruleArr[0]);
        updatedDateArr = getMinArr(ruleArr[1], updatedDateArr);
        updatedDateArr = getHourArr(ruleArr[2], updatedDateArr);

        const dayResult = getDayArr(ruleArr[3], updatedDateArr);
        updatedDateArr = dayResult.newDateArr;
        let updatedDayRule = dayResult.newDayRule;
        let updatedDayRuleSup = dayResult.newDayRuleSup;

        updatedDateArr = getMonthArr(ruleArr[4], updatedDateArr);

        const weekResult = getWeekArr(ruleArr[5], updatedDateArr, updatedDayRule, updatedDayRuleSup);
        updatedDateArr = weekResult.newDateArr;
        updatedDayRule = weekResult.newDayRule;
        updatedDayRuleSup = weekResult.newDayRuleSup;

        updatedDateArr = getYearArr(ruleArr[6], nYear, updatedDateArr);

        // 更新状态
        setDateArr(updatedDateArr);
        setDayRule(updatedDayRule);
        setDayRuleSup(updatedDayRuleSup);

        // 将获取到的数组赋值-方便使用
        let sDate = updatedDateArr[0];
        let mDate = updatedDateArr[1];
        let hDate = updatedDateArr[2];
        let DDate = updatedDateArr[3];
        let MDate = updatedDateArr[4];
        let YDate = updatedDateArr[5];

        // 获取当前时间在数组中的索引
        let sIdx = getIndex(sDate, nSecond);
        let mIdx = getIndex(mDate, nMin);
        let hIdx = getIndex(hDate, nHour);
        let DIdx = getIndex(DDate, nDay);
        let MIdx = getIndex(MDate, nMonth);
        let YIdx = getIndex(YDate, nYear);

        // 重置月日时分秒的函数(后面用的比较多)
        const resetSecond = function () {
            sIdx = 0;
            nSecond = sDate[sIdx];
        };

        const resetMin = function () {
            mIdx = 0;
            nMin = mDate[mIdx];
            resetSecond();
        };

        const resetHour = function () {
            hIdx = 0;
            nHour = hDate[hIdx];
            resetMin();
        };

        const resetDay = function () {
            DIdx = 0;
            nDay = DDate[DIdx];
            resetHour();
        };

        const resetMonth = function () {
            MIdx = 0;
            nMonth = MDate[MIdx];
            resetDay();
        };

        // 如果当前年份不为数组中当前值
        if (nYear !== YDate[YIdx]) {
            resetMonth();
        }

        // 如果当前月份不为数组中当前值
        if (nMonth !== MDate[MIdx]) {
            resetDay();
        }

        // 如果当前"日"不为数组中当前值
        if (nDay !== DDate[DIdx]) {
            resetHour();
        }

        // 如果当前"时"不为数组中当前值
        if (nHour !== hDate[hIdx]) {
            resetMin();
        }

        // 如果当前"分"不为数组中当前值
        if (nMin !== mDate[mIdx]) {
            resetSecond();
        }

        // 循环年份数组
        goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
            let YY = YDate[Yi];

            // 如果到达最大值时
            if (nMonth > MDate[MDate.length - 1]) {
                resetMonth();
                continue;
            }

            // 循环月份数组
            goMonth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
                // 赋值、方便后面运算
                let MM:number|string = MDate[Mi];
                MM = MM < 10 ? "0" + MM : MM;

                // 如果到达最大值时
                if (nDay > DDate[DDate.length - 1]) {
                    resetDay();
                    if (Mi === MDate.length - 1) {
                        resetMonth();
                        continue goYear;
                    }
                    continue;
                }

                // 循环日期数组
                goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
                    // 赋值、方便后面运算
                    let DD:number|string = DDate[Di];
                    let thisDD = DD < 10 ? "0" + DD : DD;

                    // 如果到达最大值时
                    if (nHour > hDate[hDate.length - 1]) {
                        resetHour();
                        if (Di === DDate.length - 1) {
                            resetDay();
                            if (Mi === MDate.length - 1) {
                                resetMonth();
                                continue goYear;
                            }
                            continue goMonth;
                        }
                        continue;
                    }

                    // 判断日期的合法性，不合法的话也是跳出当前循环
                    if (
                        checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true &&
                        updatedDayRule !== "workDay" &&
                        updatedDayRule !== "lastWeek" &&
                        updatedDayRule !== "lastDay"
                    ) {
                        resetDay();
                        continue goMonth;
                    }

                    // 如果日期规则中有值时
                    if (updatedDayRule === "lastDay") {
                        // 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
                        if (
                            checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                        ) {
                            while (
                                DD > 0 &&
                                checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                            ) {
                                DD--;
                                thisDD = DD < 10 ? "0" + DD : DD;
                            }
                        }
                    } else if (updatedDayRule === "workDay") {
                        // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
                        if (
                            checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                        ) {
                            while (
                                DD > 0 &&
                                checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                            ) {
                                DD--;
                                thisDD = DD < 10 ? "0" + DD : DD;
                            }
                        }
                        // 获取达到条件的日期是星期X
                        let thisWeek = formatDate(
                            Number(new Date(YY + "-" + MM + "-" + thisDD + " 00:00:00")),
                            "week"
                        ) as number;
                        // 当星期日时
                        if (thisWeek === 0) {
                            // 先找下一个日，并判断是否为月底
                            DD++;
                            thisDD = DD < 10 ? "0" + DD : DD;
                            // 判断下一日已经不是合法日期
                            if (
                                checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                            ) {
                                DD -= 3;
                            }
                        } else if (thisWeek === 6) {
                            // 当星期6时只需判断不是1号就可进行操作
                            if (updatedDayRuleSup !== 1) {
                                DD--;
                            } else {
                                DD += 2;
                            }
                        }
                    } else if (updatedDayRule === "weekDay") {
                        // 如果指定了是星期几
                        // 获取当前日期是属于星期几
                        let thisWeek = formatDate(
                            Number(new Date(YY + "-" + MM + "-" + DD + " 00:00:00")),
                            "week"
                        ) as number;
                        // 校验当前星期是否在星期池（dayRuleSup）中
                        if (Array.isArray(updatedDayRuleSup) && updatedDayRuleSup.indexOf(thisWeek) < 0) {
                            // 如果到达最大值时
                            if (Di === DDate.length - 1) {
                                resetDay();
                                if (Mi === MDate.length - 1) {
                                    resetMonth();
                                    continue goYear;
                                }
                                continue goMonth;
                            }
                            continue;
                        }
                    } else if (updatedDayRule === "assWeek") {
                        // 如果指定了是第几周的星期几
                        // 获取每月1号是属于星期几
                        let thisWeek = formatDate(
                            Number(new Date(YY + "-" + MM + "-" + DD + " 00:00:00")),
                            "week"
                        ) as number;
                        if (Array.isArray(updatedDayRuleSup) && updatedDayRuleSup[1] >= thisWeek) {
                            DD = (updatedDayRuleSup[0] - 1) * 7 + updatedDayRuleSup[1] - thisWeek + 1;
                        } else if (Array.isArray(updatedDayRuleSup)) {
                            DD = updatedDayRuleSup[0] * 7 + updatedDayRuleSup[1] - thisWeek + 1;
                        }
                    } else if (updatedDayRule === "lastWeek") {
                        // 如果指定了每月最后一个星期几
                        // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
                        if (
                            checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                        ) {
                            while (
                                DD > 0 &&
                                checkDate(YY + "-" + MM + "-" + thisDD + " 00:00:00") !== true
                            ) {
                                DD--;
                                thisDD = DD < 10 ? "0" + DD : DD;
                            }
                        }
                        // 获取月末最后一天是星期几
                        let thisWeek = formatDate(
                            Number(new Date(YY + "-" + MM + "-" + thisDD + " 00:00:00")),
                            "week"
                        ) as number;
                        // 找到要求中最近的那个星期几
                        if (typeof updatedDayRuleSup === 'number' && updatedDayRuleSup < thisWeek) {
                            DD -= thisWeek - updatedDayRuleSup;
                        } else if (typeof updatedDayRuleSup === 'number' && updatedDayRuleSup > thisWeek) {
                            DD -= 7 - (updatedDayRuleSup - thisWeek);
                        }
                    }

                    // 判断时间值是否小于10置换成"05"这种格式
                    DD = DD < 10 ? "0" + DD : DD;

                    // 循环"时"数组
                    goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
                        let hh = hDate[hi] < 10 ? "0" + hDate[hi] : hDate[hi];

                        // 如果到达最大值时
                        if (nMin > mDate[mDate.length - 1]) {
                            resetMin();
                            if (hi === hDate.length - 1) {
                                resetHour();
                                if (Di === DDate.length - 1) {
                                    resetDay();
                                    if (Mi === MDate.length - 1) {
                                        resetMonth();
                                        continue goYear;
                                    }
                                    continue goMonth;
                                }
                                continue goDay;
                            }
                            continue;
                        }

                        // 循环"分"数组
                        goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
                            let mm = mDate[mi] < 10 ? "0" + mDate[mi] : mDate[mi];

                            // 如果到达最大值时
                            if (nSecond > sDate[sDate.length - 1]) {
                                resetSecond();
                                if (mi === mDate.length - 1) {
                                    resetMin();
                                    if (hi === hDate.length - 1) {
                                        resetHour();
                                        if (Di === DDate.length - 1) {
                                            resetDay();
                                            if (Mi === MDate.length - 1) {
                                                resetMonth();
                                                continue goYear;
                                            }
                                            continue goMonth;
                                        }
                                        continue goDay;
                                    }
                                    continue goHour;
                                }
                                continue;
                            }

                            // 循环"秒"数组
                            goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
                                let ss = sDate[si] < 10 ? "0" + sDate[si] : sDate[si];

                                // 添加当前时间（时间合法性在日期循环时已经判断）
                                if (MM.toString() !== "00" && DD.toString() !== "00") {
                                    resultArr.push(
                                        YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss
                                    );
                                    nums++;
                                }

                                // 如果条数满了就退出循环
                                if (nums === 5) break goYear;

                                // 如果到达最大值时
                                if (si === sDate.length - 1) {
                                    resetSecond();
                                    if (mi === mDate.length - 1) {
                                        resetMin();
                                        if (hi === hDate.length - 1) {
                                            resetHour();
                                            if (Di === DDate.length - 1) {
                                                resetDay();
                                                if (Mi === MDate.length - 1) {
                                                    resetMonth();
                                                    continue goYear;
                                                }
                                                continue goMonth;
                                            }
                                            continue goDay;
                                        }
                                        continue goHour;
                                    }
                                    continue goMin;
                                }
                            } //goSecond
                        } //goMin
                    } //goHour
                } //goDay
            } //goMonth
        }

        // 判断100年内的结果条数
        if (resultArr.length === 0) {
            setResultList(["没有达到条件的结果！"]);
        } else {
            setResultList(resultArr);
            if (resultArr.length !== 5) {
                setResultList([
                    ...resultArr,
                    "最近100年内只有上面" + resultArr.length + "条结果！",
                ]);
            }
        }

        // 计算完成-显示结果
        setIsShow(true);
    }, [ex, getIndex, checkDate, formatDate, getSecondArr, getMinArr, getHourArr, getDayArr, getMonthArr, getWeekArr, getYearArr]);

    useEffect(() => {
        // Only run if the expression has actually changed
        if (ex !== prevExRef.current) {
            prevExRef.current = ex;
            expressionChange();
        }
    }, [ex, expressionChange]);

    return (
        <Card title="最近5次运行时间" extra={null} style={{ width: "100%" }}>
            <ul className="popup-result-scroll">
                {isShow ? (
                    <List
                        bordered
                        dataSource={resultList}
                        renderItem={(item) => (
                            <List.Item>
                                {item}
                            </List.Item>
                        )}
                    />

                ) : (
                    <li>计算结果中...</li>
                )}
            </ul>

            <style jsx>{`
        .popup-result {
          background: white;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          padding: 20px;
          margin: 20px 0;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        }
        
        .title {
          font-size: 18px;
          font-weight: 600;
          color: #2d3748;
          margin-bottom: 16px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e2e8f0;
          display: flex;
          align-items: center;
        }
        
        .title:before {
          content: "⏰";
          margin-right: 10px;
          font-size: 20px;
        }
        
        .popup-result-scroll {
          max-height: 250px;
          overflow-y: auto;
          list-style: none;
          padding: 0;
          margin: 0;
        }
        
        .popup-result-scroll li {
          padding: 12px 16px;
          border-radius: 8px;
          margin-bottom: 8px;
          background: #f7fafc;
          border-left: 4px solid #4299e1;
          font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
          font-size: 14px;
          color: #4a5568;
          transition: all 0.2s ease;
        }
        
        .popup-result-scroll li:hover {
          background: #edf2f7;
          transform: translateX(4px);
        }
        
        .popup-result-scroll li:last-child {
          margin-bottom: 0;
          font-style: italic;
          color: #718096;
          border-left-color: #a0aec0;
        }
        
        /* 滚动条样式 */
        .popup-result-scroll::-webkit-scrollbar {
          width: 6px;
        }
        
        .popup-result-scroll::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        
        .popup-result-scroll::-webkit-scrollbar-thumb {
          background: #cbd5e0;
          border-radius: 3px;
        }
        
        .popup-result-scroll::-webkit-scrollbar-thumb:hover {
          background: #a0aec0;
        }
      `}</style>
        </Card>
    );
};

export default PopupResult;